<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<script  type="text/javascript"src="${APP_PATH }/static/js/pageComm.js"></script>

</head>

  <body>
  <!-- 模态框 -->
  <%@include file="/WEB-INF/include/deptModal.jsp" %>
  
  <!-- container section start -->
  <section id="container" class="">
      <%@include file="/WEB-INF/include/top.jsp"%>

      <%@include file="/WEB-INF/include/left.jsp"%>

      <!--main content start-->
      <section id="main-content" >
          <section class="wrapper">
		  <div class="row">
				<div class="col-lg-12">
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.jsp">部门管理</a></li>
						<li><i class="fa fa-table"></i>部门信息</li>
					</ol>
					
				</div>
			</div>
	          
             
            
            
              <div class="row" align="center" style="margin:0 auto">
                  <div class="col-lg-12">
                      <section class="panel">
                        
                          <table class="table table-striped table-advance table-hover" id="dept_table" >
                           <thead>
                           	 <tr>
                                 <th width="5%" style="text-align: center;"><input type="checkbox" id="checkAll" /></th>
                                 <th width="17%">ID</th>
                                 <th width="38%">部门名称</th>
                                 <th width="20%">管理人</th>
                                 <th width="20%" style="text-align: center;"><span>操作&nbsp;&nbsp;&nbsp;</span>
                                 	<span class="btn-group" >
                                      <a class="btn btn-primary" id="newDept" >新增</a>
                                      <a class="btn btn-danger" id="deleteDeptList">删除</a>
                      				</span>
                                 </th>
                              </tr>
                           </thead>                           
                           <tbody>
                          <c:forEach items="${pageInfo.list }" var="dept">
                          
                          	<tr>
                                 <td align="center"><input type="checkbox" class="checkbox" /></td>
                                 <td class="deptInfo">${dept.id }</td>
                                 <td class="deptInfo">${dept.deptName }</td>
                                 <td>${dept.user.username }</td>
                                 <td style="text-align:center;">
                                  <div class="btn-group" style="text-align:center;">
                                      <a class="btn btn-primary updateDept">修改</a>
                                      <a class="btn btn-danger" >删除</a>
                                  </div>
                                  </td>
                              </tr>
                          
                          
                          </c:forEach>    
                            
                        
                           </tbody>
                            
                        </table>
                        
                      </section>
                      
                  </div>
              </div>
              
              
              <!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">

			</div>
		</div>
              
          </section>
          
        
          
      
      </section>
      <!--main content end-->
  </section>
  <!-- container section end -->
    <!-- javascripts -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- nicescroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <!--custome script for all page-->
    <script src="js/scripts.js"></script>
 
<script type="text/javascript">
var currentPage;
     $(function(){
    		//加载首页内容
    		to_page(1);
     });		
       
	    //去指定的分页
	      function to_page(pn){
	      		$.ajax({
	      			url:"${APP_PATH}/depts",
	      			data:"pn="+pn,
	      			type:"GET",
	      			success:function(result){
	      				//1. 解析并显示员工数据
	 				   build_emps_table(result);
	 				   //2. 解析并显示分页数据
	 				   build_page_info(result);
	 				   //解析显示分页条
	 				   build_page_nav(result);
	      			}
	      		});	
	      }
	    
	    
	  	//1. 解析并显示员工数据
		function build_emps_table(result){
			//清空table表格
	  		$("#dept_table tbody").empty();
			//获取返回的dept值
			var dept=result.extend.pageInfo.list;
			$.each(dept,function(index,item){
				var checkboxTd=$("<td></td>").append($("<input></input>")
						.addClass("checkbox")
						.attr("deptName",item.deptName)
						.attr("deptId",item.id)
						.attr( "type","checkbox")).attr("align","center");
				
				var idTd=$("<td></td>").addClass("deptInfo").append(item.id);
				var deptTd=$("<td></td>").addClass("deptInfo").append(item.deptName);
				deptTd.attr("deptId",item.id);
				idTd.attr("deptId",item.id);
				
				var adminTd=$("<td></td>").append(item.user.username).addClass("adminTd");
				
				
				var editBtn=$("<a></a>").addClass("updateDept").addClass("btn btn-primary").append("修改");
				var deleteBtn=$("<a class='btn btn-danger deleteDept' >删除</a>")
				editBtn.attr("deptId",item.id);
				deleteBtn.attr("deptId",item.id);
				deleteBtn.attr("deptName",item.deptName);
				var btnGroupTd=$("<td style='text-align:center;'></td>").append($("<div></div>").addClass("btn-group"));
				
				btnGroupTd.append(editBtn).append(deleteBtn);
				
				$("<tr></tr>").append(checkboxTd)
							  .append(idTd)
							  .append(deptTd)
							  .append(adminTd)
							  .append(btnGroupTd)
							  .appendTo($("#dept_table tbody"));
				
			});
	  	}
		
		
		  //新建部门
			$("#newDept").click(function(){
				//清除表单数据
			reset_form("#deptModal form");
				//隐藏id显示框
				$("#divdeptId").hide();
				//隐藏管理员显示框
				$("#deptAdmin").hide();
				//设置模态框标题
				$("#deptModalLabel").text("新建部门");
				//显示保存按钮
				$("#saveDept").show();
				//打开模态框
				$("#deptModal").modal({
					backdrop: "static"
				});
			}); 
 		  
 		function checkDeptName(){
 			
 			if($("#deptName").val() == "" || $("#deptName").val() == null){
 				$("#deptName").parent().addClass("has-error");
 				$("#deptNameMsg").html("用户名不能为空");
 				return false
 			}else{
 				$("#deptName").parent().removeClass("has-error");
 				$("#deptNameMsg").html("");
 				return true;
 			}
 		}
 		
 		$("#deptName").blur(function(){
 			checkDeptName();
 		});
 		
			$("#saveDept").click(function(){
				
				//判断部门名是否为空
				if(!checkDeptName()){
					return false;
				}

				if($("#deptIdHidden").val() == null || $("#deptIdHidden").val() == "" ){
					newDept();
				}else{
					updateDept();
				}
				
			});
			//新建部门
			function newDept(){
				//alert($("#deptModal form").serialize());
				$.ajax({
					url:"dept",
					type:"POST",
					data:$("#deptModal form").serialize(),
					success:function(result){
						//保存成功
						if(result.code == 100){
							//关闭模态框
							$("#deptModal").modal("hide");
							//返回最后一页
							to_page("99999");
						}else{
							
							if(undefined != result.extend.msg){
								alert(result.extend.msg);
								//关闭模态框
								$("#deptModal").modal("hide");
							}
							
							//显示错误消息
							if(undefined != result.extend.fieldError.deptName){
								$("#deptName").parent().addClass("has-error");
								$("#deptNameMsg").html(result.extend.fieldError.deptName);
							}
						}
					}
				});
			}
			//更新部门
			function updateDept(){

				$.ajax({
					url:"dept",
					type:"PUT",
					data:$("#deptModal form").serialize(),
					success:function(result){
						//保存成功
						if(result.code == 100){
							//关闭模态框
							$("#deptModal").modal("hide");
							//返回最后一页
							to_page(currentPage);
						}else{
							if(undefined != result.extend.msg){
								alert(result.extend.msg);
								//关闭模态框
								$("#deptModal").modal("hide");
							}
							
							//显示错误消息
							if(undefined != result.extend.fieldError.deptName){
								$("#deptName").parent().addClass("has-error");
								$("#deptNameMsg").html(result.extend.fieldError.deptName);
							}
						}
					}
				});
			}
		//清空表单样式及内容
		   function reset_form(ele){
			   $(ele)[0].reset();
			   //清空表单样式
			   $(ele).find("*").removeAttr("value");
			   $(ele).find("*").removeClass("has-error has-success");
			   $(ele).find(".help-block").text("");
			   $("#deptAdmin select").empty();
			 
		   }
		 //查看部门详情
		   $(document).on("click",".deptInfo",function(){
			   //清除表单数据
				reset_form("#deptModal form");
					//显示id显示框
					$("#divdeptId").show();
				//显示管理员显示框
					$("#deptAdmin").show();
					//设置模态框标题
					$("#deptModalLabel").text("部门详细信息");
					//隐藏保存键
					$("#saveDept").hide();
					//显示信息
					showDept($(this).attr("deptId"),"deptInfo");
					//打开模态框
					$("#deptModal").modal({
						
						backdrop: "static"
					});
				});
		 //根据部门id显示部门信息
		 function showDept(deptId,action){
			 $.ajax({
				 url:"${APP_PATH}/dept/"+deptId,
				 type:"GET",
				 success:function(result){
					
					//1如果该操作 是更新操作  显示该部门下所有的员工
					if( action == "updateDept"){
						
						
						//将数据放在select中
						 $("#deptAdmin select").empty();
						 $.each(result.extend.userList,function(index,value){
							$("#deptAdmin select").append($("<option></option>")
									 .val(value.id)
									 .append(value.username));
							
						});
					}
					
					//2在模态框中部门显示数据
					showDeptFromModal(result.extend.dept,action);
				 }
			 });
		 }
		 
		 function showDeptFromModal(dept,action){

			 $("#deptIdHidden").val(dept.id);
			 $("#deptId").val(dept.id);
			 $("#deptName").val(dept.deptName);
	
			 //判断是该操作是否为更新
			 if( action == "updateDept"){

				 $("#deptAdmin select").val(dept.userId);
			 }else if(action == "deptInfo"){
				//为显示信息的操作 

				//清空select中的option
				 $("#deptAdmin select").empty();
				 if(dept.user.id != "" && dept.user.id != null){
					 $("#deptAdmin select").append($("<option></option>")
							 .val(dept.user.id)
							 .append(dept.user.username)); 
				 }
			 }
		
			 
			 $("#deptTelephone").val(dept.deptTelephone);
			 $("#deptPhone").val(dept.deptPhone);
			 $("#deptFax").val(dept.deptFax);
			 $("#deptRemark").val(dept.deptRemark);
		 }
		 
		 //删除部门信息
		 $(document).on("click",".deleteDept",function(){
			 if(confirm("确认删除 【 "+$(this).attr("deptName")+" 】吗?")){
				 $.ajax({
					 url:"${APP_PATH}/dept/"+$(this).attr("deptId"),
					 type:"DELETE",
					 success:function(result){
						 if(result.code == 200){
							 //显示失败消息  失败
							 alert(result.extend.msg);
							 //关闭模态框
						 }else{
							//删除成功 返回当前页
							 to_page(currentPage);
						 }
						 
						 
					 }
				 });
			 }
			 
		 });
		 
		 //删除全部信息
		 $("#deleteDeptList").click(function(){
			 var checked=$("#dept_table tbody input:checked");
			 var deptIds="";
			 var deptNames="";
			 checked.each(function(index,value){
				 deptNames += $(this).attr("deptName")+",";
				 deptIds += $(this).attr("deptId")+"-";
			 });
			 deptNames=deptNames.substring(0,deptNames.length-1);
			 deptIds=deptIds.substring(0,deptIds.length-1);
			 if(confirm("确认要删除 【 "+deptNames+" 】 吗？")){
				 $.ajax({
					 url:"${APP_PATH}/dept/"+deptIds,
					 type:"DELETE",
					 success:function(result){
						 
						 if(result.code == 200){
							 //显示失败消息  失败
							 alert(result.extend.msg);
							 //关闭模态框
						 }else{
							//删除成功 返回当前页
							 to_page(currentPage);
						 }
						 
					 }
				 });
			 }
			 
		 });
			
		 //修改部门信息
		   $(document).on("click",".updateDept",function(){
			 //清空select中的option
				 $("#deptAdmin select").empty();
			 //清除表单数据
				reset_form("#deptModal form");
				//隐藏id显示框
				$("#divdeptId").hide();
			//显示管理员显示框
				$("#deptAdmin").show();
				//设置模态框标题
				$("#deptModalLabel").text("修改部门信息");
				//显示保存键
				$("#saveDept").show();
				
				//显示该部门下所有的用户
				//showAdmins($(this).attr("deptId"));
				//显示部门信息信息
				showDept($(this).attr("deptId"),"updateDept");
				
				//打开模态框
				$("#deptModal").modal({
					backdrop: "static"
				});
			});
		 
		 /* function showAdmins(deptId){
			$.ajax({
				url:"${APP_PATH}/users/"+deptId,
				type:"GET",
				success:function(result){
					//将数据放在select中
					 $("#deptAdmin select").empty();
					 $.each(result.extend.userList,function(index,value){
						$("#deptAdmin select").append($("<option></option>")
								 .val(value.id)
								 .append(value.username));
						
					});
				}
			});
			
		 } */
	
			
			
    
      </script>
  </body>
</html>
